iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

Python x Django 網站實作&學習記錄系列 第 21

D21 Django-bootstrap 網站美化工程 (1)

  • 分享至 

  • xImage
  •  

來試著稍微美化一下網頁排版
試試看使用別人包好的Django with Bootstrap
console

pip install django-bootstrap-v5

在設定中安裝
docsystem_5/settings.py

INSTALLED_APPS = [
    "bootstrap5",
]

之後要在網頁中導入css
要加入這兩句
{% load bootstrap5 %}
{% bootstrap_css %}
然後可以參考 https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/
去修改需要的版面
templates/doc/main.html

{% block content %}
{% load bootstrap5 %}
{% bootstrap_css %}

<div class="container text-end">
    <a href="{% url 'auth_info:profile' %}">My Profile</a> | 
    <a href="{% url 'doc_info:user_list' %}">My Documents</a> |
    {% if user.is_authenticated %}
    <a href="{% url 'account_logout' %}">Logout</a>
    {% else %}
    <a href="{% url 'account_login' %}">Login</a>
    {% endif %}
    <p>Welcome {{ user.first_name }} {{ user.last_name }}</p>
</div>

<div class="container">
    <div class="text-center">
        <p class="h2">Document List</p>
    </div>
    <div class="text-center">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="col-2">Create date: </th>
                    <th class="col-2">Last modified date:</th>
                    <th class="col-1">Author</th>
                    <th class="col-3">Title</th>
                    <th class="col-3">Remark</th>
                </tr>
            </thead>
            <tbody>
                {% for doc in Doc_warehouse %}
                <tr>
                    <td>{{ doc.create_date }}</td>
                    <td>{{ doc.last_mod_date }}</td>
                    <td>{{ doc.user }}</td>
                    <td>{{ doc.title }}</td>
                    <td>{{ doc.remark }}</td>
                {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <p>
        {% for page_number in Doc_warehouse.paginator.page_range %}
            {% ifequal page_number  Doc_warehouse.number %}
            {{ page_number }}
            {% else %}
            <a href="?page={{ page_number }}">{{ page_number }}</a>
            {% endifequal %}
        {% endfor %}
        </p>
    </div>
</div>

{% endblock %}

修改前的畫面
Imgur
修改後的畫面
Imgur


上一篇
D20 Email認證信 SMTP - Gmail
下一篇
D22 Django-bootstrap 網站美化工程 - fontawesomefree icon
系列文
Python x Django 網站實作&學習記錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言